<template>
  <div class="bilibili-container">
    <!-- 原始导航栏（正常文档流） -->
    <div class="original-nav" ref="originalNav" :style="{ visibility: isSticky ? 'hidden' : 'visible' }">
      <div class="nav-content">
        <div class="left-section">
          <span v-for="item in leftNavItems" :key="item.id" class="nav-item"
            :class="{ active: $route.path === item.path }" @click="navigateTo(item.path)">
            <i v-if="item.icon" class="iconfont" :class="item.icon"></i>
            {{ item.name }}
          </span>
        </div>

        <div class="right-section">
          <!-- 将user-section移到right-section内部左侧 -->
          <div class="user-section">
            <span v-if="!authStore.isLoggedIn" class="nav-item login-bg">
              <span @click="openLoginDialog">登录</span>
            </span>
            <el-dropdown v-else>
              <span class="nav-item">
                <el-avatar :size="36" :src="authStore.userInfo.avatar" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span class="today-bilibili">在bilibili星球的第{{ today_num }}天</span>
          </div>

          <!-- 右侧图标 -->
          <span class="nav-item icon-item">
            <i class="iconfont icon-xinfeng" @click="goPushMessage"></i>
          </span>
          <!-- 应用中心图标（添加下拉菜单） -->
          <el-popover placement="bottom-end" trigger="hover" :width="160" transition="el-zoom-in-top">
            <template #reference>
              <span class="nav-item icon-item app-center">
                <i class="iconfont icon-icon-"></i>
              </span>
            </template>

            <div class="app-dropdown-menu">
              <div class="app-item">
                <i class="iconfont icon-zhibokecheng"></i>
                <span>直播姬</span>
              </div>
              <div class="app-item">
                <i class="iconfont icon-bijian"></i>
                <span>必剪</span>
              </div>
              <div class="app-item">
                <i class="iconfont icon-kewoyun"></i>
                <span>bilibili开课</span>
              </div>
            </div>
          </el-popover>

        </div>
      </div>
    </div>

    <!-- 吸顶导航栏（固定定位） -->
    <div class="sticky-nav" :class="{ 'sticky-active': isSticky }">
      <div class="nav-content">
        <div class="left-section">
          <span v-for="item in leftNavItems" :key="item.id" class="nav-item" :class="{ active: item.id === 1 }">
            {{ item.name }}
          </span>
        </div>

        <div class="middle-section">
          <div class="search-box">
            <el-input v-model="searchText" placeholder="每天都有新发现" class="search-input">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>

        <div class="right-section">
          <div class="user-section">
            <span v-if="!authStore.isLoggedIn" class="nav-item login-bg">
              <span @click="openLoginDialog">登录</span>
            </span>
            <el-dropdown v-else>
              <span class="nav-item">
                <el-avatar :size="36" :src="authStore.userInfo.avatar" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span class="nav-item submit-text">
              <i class="iconfont icon-tougaox"></i>
              <span>投稿</span>
            </span>
          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- 登录弹窗组件 -->
  <LoginDialog ref="loginDialog" />
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, onMounted, onUnmounted } from 'vue'
import { throttle } from 'lodash-es'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import LoginDialog from '@/components/LoginDialog.vue'

const router = useRouter()
const authStore = useAuthStore()
const searchText = ref('')
const originalNav = ref(null)
const isSticky = ref(false)
const loginDialog = ref(null)
const visible = ref(false)
//在bilibili天数
let today_num = ref('365');
// 消息页面
const goPushMessage = () => {
  router.push('/Message')
}
const openLoginDialog = () => {
  loginDialog.value?.open()
}

const handleLogout = () => {
  authStore.logout()
  ElMessage.success('已退出登录')
}

const navigateTo = (path) => {
  router.push(path)
}

const leftNavItems = [
  { id: 1, name: '创作中心', path: '/Platform', icon: 'icon-bilibili1' },
  { id: 2, name: '主站', path: '/HomeView', icon: 'icon-bilibili' },
]

const handleScroll = throttle(() => {
  if (!originalNav.value) return
  const navRect = originalNav.value.getBoundingClientRect()
  isSticky.value = navRect.bottom <= 0
}, 100)

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

defineExpose({
  open: () => {
    visible.value = true
  }
})
</script>

<style lang="scss" scoped>
.bilibili-container {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 原始导航栏样式 */
  .original-nav {
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 24px;
      max-width: 1400px;
      margin: 0 auto;
    }
  }

  /* 吸顶导航栏样式 */
  .sticky-nav {
    position: fixed;
    top: -60px;
    left: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: top 0.3s ease;

    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 24px;
      max-width: 1400px;
      margin: 0 auto;
    }

    &.sticky-active {
      top: 0;
    }
  }

  /* 左侧导航 */
  .left-section {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;

    .nav-item {
      font-size: 14px;
      color: #222;
      cursor: pointer;
      transition: color 0.2s;
      white-space: nowrap;
      padding: 0 8px;
      height: 50px;
      line-height: 50px;

      i.iconfont {
        margin-right: 4px;
      }

      &:hover {
        color: #00a1d6;
      }

      &.active {
        color: #00a1d6;
        font-weight: 500;
        border-bottom: 2px solid #00a1d6;
      }
    }
  }

  /* 搜索框 */
  .middle-section {
    flex: 1;
    max-width: 500px;
    padding: 0 20px;

  }

  /* 右侧导航区域 */
  .right-section {
    display: flex;
    align-items: center;
    gap: 10px;

    /* 用户区域样式 */
    .user-section {
      display: flex;
      align-items: center;
      margin-right: 15px;

      .nav-item {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 5px;
        cursor: pointer;
      }

      .today-bilibili {
        background: rgba(250, 142, 87, .1);
        border: 1px solid rgba(250, 142, 87, .43);
        border-radius: 14px;
        padding: 5px 12px 5px 16px;
        font-size: 12px;
        color: #fa8e57;
        text-align: center;
        margin-right: 32px;
        margin-left: 12px;
      }

      /* 登录按钮样式 */
      .login-bg span {
        width: 36px;
        height: 36px;
        background-color: #00a1d6;
        color: white;
        font-weight: 800;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    /* 图标项样式 */
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 50px;
      cursor: pointer;

      i {
        font-size: 24px;
        color: #222;
        transition: color 0.2s;
      }

      &:hover i {
        color: #00a1d6;
      }
    }

    /* 投稿按钮样式 (仅吸顶导航有) */
    .submit-text {
      width: 77px;
      height: 30px;
      background-color: #14a4d8;
      color: #e7e7e7;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-left: 10px;

      .iconfont {
        font-size: 25px;
        margin-right: 4px;
      }
    }
  }
}
</style>
